<template>
  <el-col :span="8">
    <el-row type="flex" justify="end">
      <el-col>
        <div class="location">
          <i class="el-icon-location-outline" />
          江苏省 常州市 路径御城
        </div>
      </el-col>
    </el-row>
    <el-radio-group v-model="timeType" size="small">
      <el-radio-button label="week">本周</el-radio-button>
      <el-radio-button label="month">本月</el-radio-button>
      <el-radio-button label="year">本年度</el-radio-button>
    </el-radio-group>
    <project-data />
    <el-row type="flex">
      <el-col :span="12">
        <fee-item-grid />
      </el-col>
      <el-col :span="12">
        <el-row>
          <charge-pie />
        </el-row>
        <el-row>
          <financial-data />
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col><hydropower-usage /></el-col>
    </el-row>
    <el-row>
      <el-col><park-grid /></el-col>
    </el-row>
  </el-col>
</template>

<script>
import ChargePie from "./ChargePie.vue";
import FeeItemGrid from "./FeeItemGrid.vue";
import HydropowerUsage from "./HydropowerUsage.vue";
import ParkGrid from "./ParkGrid.vue";
import ProjectData from "./ProjectData.vue";
import FinancialData from "./FinancialData.vue";

export default {
  name: "RightPanel",
  components: {
    ChargePie,
    FeeItemGrid,
    HydropowerUsage,
    ParkGrid,
    ProjectData,
    FinancialData
  },
  computed: {
    timeType: {
      get() {
        return this.$store.state.ControlCenter.timeType;
      },
      set(value) {
        this.$store.commit("ControlCenter/updateTime", value);
      }
    }
  },
  methods: {}
};
</script>

<style scoped>
.location {
  font-size: 16px;
  text-align: end;
}
</style>
